<script setup>
import { nextTick, ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { meinvPictureService } from '@/api/tools'
const imageList = ref([
  // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
])

const imgRef = ref(null)
const onPicture = (index) => {
  showImagePreview({
    images: [...imageList.value],
    closeable: true,
    startPosition: index,
    onClose(value) {
      nextTick(() => {
        imgRef.value[value.index].scrollIntoView({
          behavior: 'instant',
          // behavior: 'smooth',
          // block: 'center'
          block: 'end'
        })
        // console.log(value)
        // console.log(imgRef.value[0])
      })
    }
  })
}

const downPicture = async (img) => {
  const link = document.createElement('a')
  link.href = img
  link.download = 'downPicture.png'
  link.click()
  link.remove() // 清理 DOM

  // window.open(musicUrl.data)
}

const isDisabled = ref(false)
let timer = null
const loadPicture = async () => {
  showNotify({ type: 'primary', message: '每隔3秒加载一张图片' })
  timer = setInterval(async () => {
    try {
      const pictureUrl = await meinvPictureService()
      imageList.value.push(pictureUrl.data.data.image)
    } catch (err) {
      clearInterval(timer)
      showNotify({ type: 'primary', message: '加载失败' })
    }
  }, 3000)
  isDisabled.value = true
}

const stopLoad = () => {
  clearInterval(timer)
  showNotify({ type: 'primary', message: '已停止加载' })
  isDisabled.value = false
}

// onMounted(async () => {
// timer = setInterval(async () => {
// const pictureUrl = await meinvPictureService()
// console.log(pictureUrl.data.data.image)
// imageList.value.push(pictureUrl.data.data.image)
// }, 3000)
// })
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="tool-box-meinv">
    <div class="tool-box-meinv-header">
      <van-nav-bar
        fixed
        :placeholder="true"
        title="随机美女"
        left-arrow
        @click-left="router.go(-1)"
      />
    </div>
    <div class="tool-box-meinv-content" style="margin-bottom: 100px">
      <van-image
        v-for="(img, index) in imageList"
        :key="img"
        :alt="index + ''"
        width="100%"
        height="100%"
        lazy-load
        :src="img"
        @click="onPicture(index)"
      >
        <div class="down-button">
          <span ref="imgRef">图{{ index }}</span>
          <van-button
            @click.stop="downPicture(img)"
            plain
            size="small"
            type="primary"
          >
            下载图片
          </van-button>
        </div>
      </van-image>
      <div class="tool-box-meinv-content-button">
        <van-button
          @click="loadPicture()"
          :disabled="isDisabled"
          plain
          size="small"
          type="primary"
        >
          加载图片
        </van-button>
        <van-button
          @click="stopLoad()"
          :disabled="!isDisabled"
          plain
          size="small"
          type="primary"
        >
          停止加载
        </van-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.down-button {
  display: flex;
  justify-content: center;
  margin: 10px auto;
  align-items: center;
}
.tool-box-meinv-content-button {
  width: 90%;
  display: flex;
  justify-content: space-between;
  /* margin: 10px auto; */
  position: fixed;
  bottom: 30px;
  left: 18px;
}
</style>
